<template>
	<div class="panl-box">
		<!-- 正在进行中 -->
		<ul class="list-box">
			<li class="item-title">
				<h3>正在进行中</h3>
				<p>{{ runings.length }}</p>
			</li>
			<li
				v-for="(value, index) in runings"
				@click="$emit('runToEnd', index)"
				:key="index"
			>
				<input type="checkbox" />
				{{ value }}
			</li>
		</ul>
		<!-- 已经完成的 -->
		<ul class="list-box">
			<li class="item-title">
				<h3>已经完成的</h3>
				<p>{{ ends.length }}</p>
			</li>
			<li
				v-for="(value, index) in ends"
				@click="$emit('endToRun', index)"
				:key="index"
			>
				<input type="checkbox" />
				{{ value }}
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	props: ['runings', 'ends'],
}
</script>

<style>
.panl-box {
	background: #ccc;
}
.list-box li {
	border-radius: 4px;
	background: #fff;
	max-width: 50%;
	margin: 10px;
}
.item-title {
	display: flex;
}
</style>